<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>榜单</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<link rel="stylesheet" href="https://cdn.91haoka.cn/vant.css" />
		<script src="https://cdn.91haoka.cn/vue.min.js"></script>
		<script src="https://cdn.91haoka.cn/vantall.js"></script>
		<script src="https://cdn.91haoka.cn/axios.min.js"></script>
		<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
		<link rel="stylesheet" type="text/css" href="https://static.91haoka.cn/all.css" />
	</head>
	<style>
		[v-cloak] {
			display: none;
		}
		* {
			margin: 0;
			padding: 0;
		}
		body{ color: #4E4E4E; }
		.act{border-bottom:3px #FF5811 solid;}
		.li{border-bottom:1px #E8E8E8 solid; padding: 0.2rem 0;}
		img{ display: block;}
	</style>
	<body>
		<div id="app" v-cloak>
			<div class="flex" style="border-bottom: 1px #E8E8E8 solid;">
				<div style="line-height: 1rem; font-size: 16px;  font-weight: bold; flex: 1; text-align: center; #4E4E4E" @click="bang = 1"><span style=" padding: 0.1rem 0;" :class="bang==1?'act':''" >收礼榜</span></div>
				<div style="line-height: 1rem; font-size: 16px; font-weight: bold; flex: 1; text-align: center; #4E4E4E" @click="bang = 2"><span  style=" padding: 0.1rem 0;" :class="bang==2?'act':''" >送礼榜</span></div>
			</div>
			
			<div class="list" style="padding:0 0.45rem; border-bottom: 1px #E8E8E8 solid; min-height: 100vh;" v-if="bang == 1">
			
				<div class="li flexc" style="font-size: 16px;" v-for="(item,index) in list" :key="index">
					<div style="width: 0.5rem; font-size: 16px;">{{index+1}}</div>
					<div style="width: 1rem;"><img :src="item.head_img" style="border-radius:0.9rem; width: 0.9rem;height: 0.9rem"></div>
					<div style="width: 3.5rem; padding: 0 0.2rem;">
						<div style="color: #777; font-size: 14px; margin-bottom: 0.1rem;">{{item.name}}</div>
						<div style="color: #777; font-size: 12px;"></div>
					</div>
					<div class="flexcc" style="width: 1.6rem;">
						<span style="font-size: 18px; font-weight: bold; margin-right: 5px; padding: 0.1rem 0;">{{item.points}}</span>派币
					</div>
				</div>
			</div>
	
			<div class="list" style="padding:0 0.45rem; border-bottom: 1px #E8E8E8 solid; min-height: 100vh;" v-if="bang == 2">
		
				<div class="li flexc" style="font-size: 16px;" v-for="(item,index) in list2" :key="index">
					<div style="width: 0.5rem; font-size: 16px;">{{index+1}}</div>
					<div style="width: 1rem;"><img :src="item.head_img" style="border-radius:0.9rem; width: 0.9rem;height: 0.9rem"></div>
					<div style="width: 3.5rem; padding: 0 0.2rem;">
						<div style="color: #777; font-size: 14px; margin-bottom: 0.1rem;">{{item.nickname}}</div>
						<div style="color: #777; font-size: 12px;"></div>
					</div>
					<div class="flexcc" style="width: 1.6rem;"><span style="font-size: 18px; font-weight: bold; margin-right: 5px;">{{item.points}}</span>派币</div>
				</div>
			</div>
		</div>
	</body>

	<script>
		var h = document.documentElement.clientWidth / 7.5 + 'px';
		document.documentElement.style.fontSize = h;
		new Vue({
			el: '#app',
			data: function() {
				return {
					list:"",
					bang:1,
					list2:"",
					activity_id:"",
					package_id:""
				}
			},
			created() {
				this.activity_id = this.getUrlParam('activity_id')
				this.package_id = this.getUrlParam('package_id')
				this.getbang()
				this.getbang2()
			},
			mounted() {
				
				
			},
			methods: {
				getbang:function() {
					axios.get(`/apis/api/live/api/v1/group/gift/player?activity_id=${this.activity_id}&page=1&page_size=300&package_id=${this.package_id}`)
						.then(response => {
							
							if (response.data.code == 200) {
								
								this.list = response.data.data
								console.log(this.list)
							}
						})
				},
				getbang2:function() {
					axios.get(`/apis/api/live/api/v1/group/gift/user?activity_id=${this.activity_id}&page=1&page_size=300&package_id=${this.package_id}`)
						.then(response => {
				
							if (response.data.code == 200) {
								this.list2 = response.data.data
								console.log(this.list2)
							} 
						})
				},
				// https://live.weibu.vip/api/v1/group/gift/player?activity_id=1526&page=1&page_size=1000&package_id=4155
				//https://live.weibu.vip/api/v1/group/gift/user?activity_id=1526&page=1&page_size=1000&package_id=4155
				getUrlParam(name) {
				  const reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
				  const r = window.location.search.substr(1).match(reg);
				  if (r != null) return unescape(r[2]);
				  return null;
				},
			},
		})
	</script>
	
</html>
